<template>
  <view class="page">
    <Sub-title label="退还内容" :bold="false" padding="20rpx 0 0 0" />
    <view class="r-row">
      <text>
        {{ pay_type == "0" ? "余额：" : pay_type == "1" ? "现金：" : "虚拟币：" }}
      </text>
      <text class="green">
        {{
          pay_type == "3"
            ? `${virtual_coin || 0}币（${refund.money || 0}元）`
            : `${refund.money || 0}元`
        }}（以实际退款{{ pay_type == "3" ? "虚拟币" : "金额" }}为准）
      </text>
    </view>
    <Sub-title
      :label="`${pay_type == 3 ? '虚拟币' : '现金'}退还方式`"
      :bold="false"
      padding="20rpx 0 0 0"
    />
    <view class="r-row f-row">
      <text>原路退回：<text class="green">（1-3个工作日内退款到原支付方）</text> </text>
      <view style="justify-content: flex-end">
        <u-radio-group v-model="pay">
          <u-radio activeColor="#3BA199" :name="true" />
        </u-radio-group>
      </view>
    </view>
    <Sub-title label="退款原因" :bold="false" />
    <u-textarea
      v-model="refund.refund_content"
      placeholder="请填写退款原因...."
      border="none"
      height="764rpx"
    />
    <view class="btn">
      <view class="button" @click="handleRefund"> 申请退款</view>
    </view>
  </view>
</template>

<script>
import { myApplyRefund } from "@/request/myApi.js";
export default {
  data() {
    return {
      pay_type: "1", // 退款方式
      virtual_coin: "", // 虚拟币数量
      pay: true, // 退还
      refund: {
        order_id: 0, // 订单ID
        order_type: "activity", // 订单类型
        expressType: 0, // 物流状态 0未收到货 1已收到货
        type: 2, // 退款类型 0我要退款(无需退货) 1退货退款 2活动退款
        reason: 7, // 退款原因  0不喜欢 1空包裹 2一直未送达 3颜色/尺码不符 4质量问题 5少件漏发 6假冒品牌 7活动退单
        goods: 0, // 商品ID
        money: 0, // 退款金额
        images: [], // 上传图片
        refund_content: "", // 退款原因
      },
    };
  },
  onLoad(e) {
    let data = JSON.parse(e.data);
    this.refund.order_id = data.order_id;
    this.refund.goods = data.goods_id;
    this.refund.money = data.money;
    this.virtual_coin = data.virtual_coin;
    this.pay_type = data.pay_type;
  },
  methods: {
    // 申请退款
    handleRefund() {
      if (!this.refund.refund_content) {
        uni.showToast({
          title: "请填写退款原因",
          icon: "none",
        });
        return false;
      }
      if (this.refund.money <= 0) {
        uni.showModal({
          title: "重要提示",
          content: "你的退款金额可能是零元，可能失去售后机会是否确认",
          success: (action) => {
            if (action.confirm) this.submitApply();
          },
        });
      } else {
        this.submitApply();
      }
    },
    // 提交申请
    submitApply() {
      myApplyRefund(this.refund).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "申请已提交",
            icon: "success",
            success: () => {
              setTimeout(() => {
                this.$prePage().getData();
                uni.navigateBack({ delta: 1 });
              }, 1500);
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  padding-bottom: 166rpx;
  .r-row {
    width: 100%;
    padding: 20rpx 0;
    font-weight: 500;
    border-bottom: 1rpx solid rgba(217, 217, 217, 0.6);
    > text {
      font-size: 28rpx;
      color: #979797;
    }
  }
  .f-row {
    display: flex;
    justify-content: space-between;
  }
  .green {
    color: $active-color !important;
    font-weight: 500;
  }
  /deep/ .u-textarea {
    background-color: #f9fcfc;
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    height: 126rpx;
    padding: 20rpx;
    z-index: 8;
    bottom: 0;
    left: 0;
    right: 0;
    .button {
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: $active-color;
      font-size: 28rpx;
      background-color: #cee7e5;
      border-radius: 100rpx;
      &:active {
        background-color: #b9e4e1;
      }
    }
  }
}
</style>
